<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.wrap{
	font-size: 12px;
	margin:40px auto;
	width:300px;
}

.ui-slider-tooltip{	/* CSS属性顺序按照 字母首字母 排列*/
	background:#FCFDFD; 
	border:1px solid green;
	color:#222222;
	display: block;
	text-align: center;
	padding: 5px 3px 5px 3px;
	width: 80px;
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}

</style>
</head>
<body>
<div class="wrap">
	<h1>第一步</h1>

	<span class="ui-slider-tooltip  ui-corner-all">
		<span>0元</span>
	</span>

	<br/>

	<span class="ui-slider-tooltip  ui-corner-all">
		<span>1000元</span>
	</span>
	
	<p>非常简单的一步，为了使span的padding有效，我们给span加了一个display:block，
	为了使文字在span内居中，加了一个text-align:center。另外就是一个兼容Firefox和基于Webkit的浏览器的圆角。</p>
</div>
</body>
</html>

